<template>
  <div class="kj">
    <div class="header">
      <div class="header_zhong">
        <div class="text">
          <a href="./"> <img src="../../assets/images/logo.png"/></a>
        </div>
        <div class="in">
          <div>个人中心>></div>
          <router-link to="centerRecord">
            <div :style="style1">学习记录</div>
          </router-link>
          <router-link to="centerTopic">
            <div :style="style2">错题库</div>
          </router-link>
          <router-link to="record">
            <div :style="style3">考试记录</div>
          </router-link>
          <router-link to="certificate">
            <div :style="style4">学习证明</div>
          </router-link>
        </div>
        <!--个人中心-->
        <div class="name">
          <Dropdown
            style="margin-left: 20px"
            placement="bottom-end"
            @on-click="userInfo"
          >
            <a style="color: #333333;font-size: 18px" href="javascript:void(0)">
              <img
                src="../../assets/images/people.png"
                style="width: 22px;height: 23px"
                v-on:click="people()"
              />&nbsp;&nbsp;
              <span trigger="click" v-on:click="people()">{{ name }}</span>
              <Icon color="#3B50A1" type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <!-- <DropdownItem trigger="click"  v-on:click="people()"><span > 个人中心</span></DropdownItem>
              <DropdownItem trigger="click"  v-on:click="esc()"><span > 退出</span></DropdownItem> -->
              <Dropdown-Item name="personal">个人中心</Dropdown-Item>
              <Dropdown-Item name="logout">退出</Dropdown-Item>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      style1: "",
      style2: "",
      style3: "",
      style4: ""
    };
  },
  methods: {
    userInfo(name) {
      if (name === "personal") {
        this.people();
      } else {
        this.esc();
      }
    },
    esc: function() {
      //退出
      //跳转之前清除下缓存
      this.$cookies.remove("pcexam_id"); //用户id
      this.$cookies.remove("pcexam_username"); //用户名
      this.$cookies.remove("pcexam_name"); //用户名
      this.$cookies.remove("pcexam_phone"); //电话
      this.$cookies.remove("pcexam_position"); //职务
      this.$cookies.remove("pcexam_departmentId"); //部门id
      this.$router.push("/login");
    },
    people: function() {
      //点击个人中心
      console.log("个人中心");
      this.$router.push({
        //核心语句
        path: "/wholeCenter", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
        }
      });
    }
  },

  mounted: function() {
    if (
      this.$cookies.get("pcexam_username") == undefined ||
      this.$cookies.get("pcexam_username") == "undefined" ||
      this.$cookies.get("pcexam_username") == "" ||
      this.$cookies.get("pcexam_username") == null ||
      this.$cookies.get("pcexam_username") == "null"
    ) {
      this.$router.push('/login');
    } else {
      this.name = this.$cookies.get("pcexam_username");
    }
    var url = this.$route.path;
    console.log(url);
    if (url == "/wholeCenter/centerRecord") {
      this.style1 = "color: #244885; border-bottom: 2px solid #244885;";
      this.style2 = "color: #333333;";
      this.style3 = "color: #333333;";
      this.style4 = "color: #333333;";
    }
    if (url == "/wholeCenter/centerTopic") {
      this.style2 = "color: #244885; border-bottom: 2px solid #244885;";
      this.style1 = "color: #333333;";
      this.style3 = "color: #333333;";
      this.style4 = "color: #333333;";
    }
    if (url == "/wholeCenter/record") {
      this.style3 = "color: #244885; border-bottom: 2px solid #244885;";
      this.style1 = "color: #333333;";
      this.style2 = "color: #333333;";
      this.style4 = "color: #333333;";
    }
    if (url == "/wholeCenter/certificate") {
      this.style4 = "color: #244885; border-bottom: 2px solid #244885;";
      this.style1 = "color: #333333;";
      this.style2 = "color: #333333;";
      this.style3 = "color: #333333;";
    }
  },
  beforeCreate: function() {},
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      console.log(to.path);
      var url = to.path;
      console.log(url);
      if (url == "/wholeCenter/centerRecord") {
        this.style1 = "color: #244885; border-bottom: 2px solid #244885;";
        this.style2 = "color: #333333;";
        this.style3 = "color: #333333;";
        this.style4 = "color: #333333;";
      }
      if (url == "/wholeCenter/centerTopic") {
        this.style2 = "color: #244885; border-bottom: 2px solid #244885;";
        this.style1 = "color: #333333;";
        this.style3 = "color: #333333;";
        this.style4 = "color: #333333;";
      }
      if (url == "/wholeCenter/record") {
        this.style3 = "color: #244885; border-bottom: 2px solid #244885;";
        this.style1 = "color: #333333;";
        this.style2 = "color: #333333;";
        this.style4 = "color: #333333;";
      }
      if (url == "/wholeCenter/certificate") {
        this.style4 = "color: #244885; border-bottom: 2px solid #244885;";
        this.style1 = "color: #333333;";
        this.style2 = "color: #333333;";
        this.style3 = "color: #333333;";
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  background: white;
  max-width: 100%;
  height: 138px;
  background-image: url("../../assets/images/banner1.png");
  background-size: cover;
  z-index: 1;
  position: relative;
}
.header_zhong {
  position: relative;
  width: 1080px;
  height: 138px;
  margin: 0 auto;
  /*background-image: url('../../assets/images/banner1.png');*/
  background-size: cover;
}
.text {
  width: 1000px;
  padding-top: 18px;
  position: relative;
}
.name {
  position: absolute;
  bottom: 10px;
  right: 37px;
}
.in {
  width: 707px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  padding-top: 3px;
}
.in div:nth-of-type(2) {
  margin-right: 20px;
  margin-left: 30px;
  cursor: pointer;
}
.in div:nth-of-type(3) {
  cursor: pointer;
}

.in div:nth-of-type(4) {
  cursor: pointer;
}
.in div {
  display: inline-block;
  width: 100px;
  line-height: 40px;
  text-align: center;
}
.peopleData > div:nth-of-type(4) {
  border: none;
}
.peopleData > div > div:nth-of-type(1) {
  font-size: 36px;
  color: rgba(51, 51, 51, 1);
}
.peopleData > div > div:nth-of-type(2),
.peopleData > div > div:nth-of-type(3) {
  font-size: 18px;
  color: #999999;
}
.crown img {
  width: 100%;
  height: 100%;
}
</style>
